<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>首页</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/resource/css/style.css" media="all"/>
</head>
<style>
    .text {
        color: #FFFFFF;
        font-size: 20px;
        margin-top: 40px;
    }
</style>
<body>

<div class="layui-tab-item layui-show">
    <div class="layui-row" style="width: 100%;">
        <div class="layui-col-md2" style="margin-left: 1.5%;width: 22%">
            <div class="layui-col-md6" style="background-color: #60A7D0;text-align: center;height: 125px;">
                <div style="margin-top: 40px">
                    <span class="text">成交金额</span>
                    <span><i class="layui-icon layui-icon-rmb"
                             style="font-size: 30px;color: #FFFFFF;"></i></span>
                </div>
            </div>
            <div class="layui-col-md6" style="background-color: #438eb9;text-align: center;height: 125px;">
                <p class="text" style="margin-top: 50px" th:text="${zumPrice+'元'}"></p>
            </div>
        </div>
        <div class="layui-col-md2" style="margin-left: 2%;width: 22%">
            <div class="layui-col-md6" style="background-color: #9cd159;text-align: center;height: 125px;">
                <div style="margin-top: 40px">
                    <span class="text">留言</span>
                    <span><i class="layui-icon layui-icon-dialogue"
                             style="font-size: 30px;color: #FFFFFF;"></i></span>
                </div>
            </div>
            <div class="layui-col-md6" style="background-color: #72b63f;text-align: center;height: 125px;">
                <p class="text" style="margin-top: 50px" th:text="${leaveWordNumber+'条'}"></p>
            </div>
        </div>
        <div class="layui-col-md2" style="margin-left: 2%;width: 22%">
            <div class="layui-col-md6" style="background-color: #ff7171;text-align: center;height: 125px;">
                <div style="margin-top: 40px">
                    <span class="text">订单数</span>
                    <span><i class="layui-icon layui-icon-form"
                             style="font-size: 30px;color: #FFFFFF;"></i></span>
                </div>
            </div>
            <div class="layui-col-md6" style="background-color: #ff5757;text-align: center;height: 125px;">
                <p class="text" style="margin-top: 50px" th:text="${orderNumber+'笔'}"></p>
            </div>
        </div>
        <div class="layui-col-md2" style="margin-left: 2%;width: 22%">
            <div class="layui-col-md6" style="background-color: #ad96d6;text-align: center;height: 125px;">
                <div style="margin-top: 40px">
                    <span class="text">会员</span>
                    <span><i class="layui-icon layui-icon-username"
                             style="font-size: 30px;color: #FFFFFF;"></i></span>
                </div>
            </div>
            <div class="layui-col-md6" style="background-color: #8775a7;text-align: center;height: 125px;">
                <p class="text" style="margin-top: 50px" th:text="${vipNum+'人'}"></p>
            </div>
        </div>
    </div>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body" style="color: #909090">
                        欢迎登录系统:<span th:text="${user.userName+'('+role+')'}"></span>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">网站信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table">
                            <tbody>
                            <tr>
                                <td>网站名称</td>
                                <td th:text="${wbeParameter.name}"></td>
                            </tr>
                            <tr>
                                <td>版本号</td>
                                <td th:text="${wbeParameter.code}"></td>
                            </tr>
                            <tr>
                                <td>域名</td>
                                <td th:text="${wbeParameter.yu}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">时钟</div>
                    <div class="layui-card-body" style="height: 190px">
                        <div style="margin-left: 5%;margin-top: 10%" class="clock">
                            <div class="flip">
                                <div class="digital front" data-number="0"></div>
                                <div class="digital back" data-number="1"></div>
                            </div>
                            <div class="flip">
                                <div class="digital front" data-number="0"></div>
                                <div class="digital back" data-number="1"></div>
                            </div>
                            <em class="divider">:</em>
                            <div class="flip">
                                <div class="digital front" data-number="0"></div>
                                <div class="digital back" data-number="1"></div>
                            </div>
                            <div class="flip">
                                <div class="digital front" data-number="0"></div>
                                <div class="digital back" data-number="1"></div>
                            </div>
                            <em class="divider">:</em>
                            <div class="flip">
                                <div class="digital front" data-number="0"></div>
                                <div class="digital back" data-number="1"></div>
                            </div>
                            <div class="flip">
                                <div class="digital front" data-number="0"></div>
                                <div class="digital back" data-number="1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="main1" style="width: 100%;height:300px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">登录记录<span style="margin-left: 69%"><a
                            href="/log/index.do">更多></a></span></div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            </thead>
                            <tbody>
                            <tr th:each="log:${logList}">
                                <td th:text="${log.userName}">贤心</td>
                                <td th:text="${log.time}">汉族</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<script src="/resource/js/script.js"></script>
<script src="/resource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript" src="/resource/js/echarts.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    var timeList = [[${timeList}]]
    timeList.sort((a,b)=>{
        return new Date(a)-new Date(b)
    })
    var orderNumberList = [[${orderNumberList}]]
    var myChart1 = echarts.init(document.getElementById('main1'));
    option1 = {
        title: {
            text: '月订单额度统计'
        },
        xAxis: {
            type: 'category',
            data: timeList
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: orderNumberList,
            type: 'line'
        }]
    };
    myChart1.setOption(option1);
</script>
</body>
</html>

